<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器：     语法:任意选择器：hover【悬停】  每个伪类选择器，具备特点 
			                   所有元素具备:hover    [常见伪类选择器]  
			 */
		     h1:hover{
				background: #eedd5b; 
				color: #00aaff;
				}
			    /*
				  伪类选择器   ：link      链接未点击时状态
				               :active     链接被点击时状态
							   :visited     链接点击后状态
							   :hover        悬停链接时状态
               主要结合在一起，针对a元素效果							   
				  */ 
			a:link{/* 未访问状态 */
				color: #aaff00;
				/* 去掉超链接下划线 */
				text-decoration: none;
			}
			a:active{/* 被点击时状态 */
				color: #ffff00;
				background: #aa55ff;
			}
			a:visited{
				color: #55aa7f;
				background: #aa0000;
			}
			a:hover{
				font-size: 36px;
			}
			/* 
			*伪类选择器：input  foucs  获取焦点：鼠标点击输入框时效果
			 
			 针对  输入框  input元素
			 */
			input:focus{
				background: #aa0000;
			}
		/* 伪类选择器  ：first-child  第一个儿子元素
		               ：last-child  最后一个儿子元素
					   ：nth-child(n)  匹配n个儿子元素
		针对：父子级 ，默认父子级 table，列表。。			   
		 */
		li:first-child{
			background: #ffff00;
			color: #ffaaff;
		}
		li:first-child{
			font-size: 15pt;
		}
		li:nth-child(2){
			background: #aa0000;
			font-size: 15px;
		}
		li:nth-child(3){
			background: #aa0000;
			font-size: 15px;
		}
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="tsxt">
		<!-- 元素之间存在父子级关系，默认存在父子级关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>